$color_bor: #bd0000;

.banner {
  width: 100%;
  height: 450px;
  background: url('@/assets/images/question/qabanner.png');
  background-size: 100% 100%;

  .right_wa {
    width: 550px;
    height: 450px;
    float: right;
    padding: 100px 0;
    box-sizing: border-box;

    .p1,
    .p2 {
      font-size: 60px;
      font-weight: bold;
    }
    .p2 {
      margin-top: 20px;
    }
    .p3 {
      font-size: 26px;
      margin-top: 15px;
      margin: 15px 0 0 -10px;
    }
  }
}

.four_lesson {
  overflow: hidden;
  margin: 20px auto;
  .item {
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
    width: 285px;
    height: 360px;
    box-sizing: border-box;
    box-shadow: #f0f0f0 0 0 3px;
    padding: 0 20px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    cursor: pointer;
    overflow: hidden;
    position: relative;

    &:hover {
      .next_page {
        top: 0px;
      }
    }

    &:nth-child(4n + 1) {
      margin-left: 0px;
    }
    i {
      height: 52px;
    }

    p.sub_title {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      margin: 6px 0;
    }

    p.sub_intro {
      font-size: 14px;
      color: #666666;
      line-height: 30px;
    }

    .next_page {
      transition: all 1s ease 0s;
      width: 285px;
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 15px 20px;
      p {
        font-size: 0px;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
      }

      &.cfa a,
      &.frm a {
        width: 150px;
        height: 30px;
        line-height: 30px;
        border: 1px solid $color_bor;
        border-radius: 15px;
        display: block;
        font-size: 14px;
        color: $color_bor;
        margin: 0 auto 15px;
      }
      &.acca {
        padding-top: 0;
        a {
          width: 40px;
          height: 40px;
          line-height: 40px;
          border: 1px solid $color_bor;
          border-radius: 100%;
          display: block;
          font-size: 14px;
          color: $color_bor;
          margin: 0 25px 5px 0;
          float: left;
        }
      }

      &.cfa a:hover,
      &.frm a:hover {
        background: $color_bor;
        color: #fff;
      }

      &.acca a:hover {
        background: $color_bor;
        color: #fff;
      }
      &.acca a:nth-child(4n) {
        margin-right: 0;
      }

      &.cpa a {
        display: inline-block;
        vertical-align: middle;
        width: 110px;
        height: 30px;
        line-height: 30px;
        border: 1px solid $color_bor;
        border-radius: 15px;
        font-size: 14px;
        color: $color_bor;
        margin-right: 20px;
        margin-bottom: 10px;
      }

      &.cpa a:nth-child(2n + 2) {
        margin-right: 0;
      }
      &.cpa a:hover {
        font-size: 14px;
        background: $color_bor;
        color: #fff;
      }
    }
  }
}

/* 新加 */
@media (max-width: 1024px) {
  .four_lesson {
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      width: 30%;
      margin-left: 0;
      margin-right: 0;
      .next_page {
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

@media (max-width: 1200px) {
  .item {
    width: 299px;
    margin-left: 0;
    margin-right: 25px;
  }
}
